const nav_items=document.querySelectorAll(".nav_right_item")
const line=document.querySelector(".line")
const banner=document.querySelector('.banner')
const banner_ul=document.querySelector('.banner .banner_box .banner_img')
const banner_li=document.querySelectorAll('.banner .banner_box .banner_img li')
const banner_li_img=document.querySelector('.banner .banner_box .banner_img li img')
const circle=document.querySelector('.circle')
const circle_ul_li=document.querySelectorAll('.circle  li')
const foot_ul=document.querySelector(".foot_right ul")
//曲线图
const curve=document.querySelector('.curve')
//饼状图
const cake=document.querySelector('.cake .cake_box')
//柱状图
const histogram=document.querySelector('.histogram')
//使用echarts
document.write('<script src="./echarts.js" type="text/javascript" charset="utf-8"></script>');

//上一页
let pre=document.querySelector(".pre")
//下一页
let next=document.querySelector(".next")
//导航下标
let nav_index=0
//轮播图下标
let banner_index=1
//圆点下标
let circle_index=0
//是否点击
let isClick=false
//定时器
let timer=null
//li宽度
let img_width=banner_li_img.clientWidth
//滑块
nav_items.forEach((item,index)=>{
    // console.log(item,index);
    item.onclick=function(){
        if(nav_index==index){
            return
        }
        nav_index=index
        console.log(nav_index);
        line.style.left=item.offsetLeft+'px'
        line.style.width=item.offsetWidth+"px"
    }
    item.onmouseover=function(){
        line.style.left=item.offsetLeft+'px'
        line.style.width=item.offsetWidth+"px"
        // console.log(item,index);
    }
    item.onmouseout=function(){
        line.style.left=nav_items[nav_index].offsetLeft+'px'
        line.style.width=nav_items[nav_index].offsetWidth+"px"
    }
})
//监听过度结算
banner_ul.addEventListener("transitionend",function(){
    if(banner_index==4){
        circle_index=0
        banner_ul.style.transition='none'
        banner_index=1
        banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
    }else 
    if(banner_index==0){
        circle_index=2
        banner_ul.style.transition='none'
        banner_index=3
        banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
    }
    // console.log("过渡",banner_index);
    // console.log(circle_index);


})
//排他
function addAction(){
    for(let i=0;i<circle_ul_li.length;i++){
        circle_ul_li[i].classList.remove("active")
    }
    circle_ul_li[circle_index].classList.add("active")
}
//自动轮播
function autoplay(){
    banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
    circle_ul_li[circle_index].classList.add("active")
    timer=setInterval(function(){
        banner_index++
        circle_index++
        if(circle_index>2){
            circle_index=0
        }
        addAction()

        banner_ul.style.transition='all 1s'
        banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
    },1500)
    
}
autoplay()   

//移入
banner.onmouseover=function(){
    clearInterval(timer)
}
//移出
banner.onmouseout=()=>{
    clearInterval(timer)
    timer=setInterval(function(){
        banner_index++
        circle_index++
        if(circle_index>2){
            circle_index=0
        }
        for(let i=0;i<circle_ul_li.length;i++){
            circle_ul_li[i].classList.remove("active")
        }
        circle_ul_li[circle_index].classList.add("active")

        banner_ul.style.transition='all 1s'
        banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
    },2000)
}
//下一张
next.onclick=function(){
    if(isClick==false){
        isClick=true
        banner_index++
        circle_index++
        banner_ul.style.transition='all 1s'
        banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
        if(circle_index>2){
        circle_index=0
    }
    addAction() 
    setTimeout(()=>{
        isClick=false
    },1500)
    }
           
}
//上一张
pre.onclick=function(){
    if(isClick==false){
        isClick=true
        banner_index--
        circle_index--
        banner_ul.style.transition='all 1s'
        banner_ul.style.transform=`translateX(-${banner_index * img_width}px)`;
        if(circle_index<0){
            circle_index=2
        }
        addAction()
        setTimeout(()=>{
            isClick=false
        },1500)
    }
    
}

//圆点点击
circle_ul_li.forEach((item)=>{
    item.onclick=()=>{
        if(isClick==false){
            isClick=true
            banner_ul.style.transition='all 1s'
            circle_index=item.dataset.index
            banner_index=Number(circle_index)+1
            addAction()
            banner_ul.style.transform=`translateX(-${(Number(circle_index)+1) * img_width}px)`; 
            setTimeout(()=>{
                isClick=false
            },1500) 
        }
        
    }
})


function curveFun(xAxis,series){
    let mycurve = echarts.init(curve);
    mycurve.setOption({
        title: {
          text: '曲线图数据展示',
          x:'center',
          y:'top',
          padding:20
        },
        tooltip: {},
        xAxis: {
          data: xAxis,
          axisTick:{
            show:false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
        },
        yAxis: {
            splitLine:{
                show:true,
                lineStyle:{
                    type:'dashed'
                }
            },
            type: 'value',
            axisLabel:{
            formatter:'{value} 人'
       }
        },
        label: {
            show:true,
            color: '#7e93d4',
            fontSize: 12
        },
        series: [
          {
            name: '日期',
            type: 'line',
            data: series,
            areaStyle: {
                color: '#c9efff',
                opacity: 0.5
              },
              smooth:true,
          }
        ]
      });
}
function cakeFun(xAxis,series){
    let newArr=[]
    for(let i=0;i<xAxis.length;i++){
        newArr.push({value: series[i],name: xAxis[i]})
    }
    let mycake=echarts.init(cake)
    mycake.setOption({
        title: {
            text: '饼状图数据展示',
            x:'center',
            y:'top',
            padding:5
          },
        series: [
          {
            type: 'pie',
            data: newArr
          }
        ]
      });
}
function histogramFun(xAxis,series){
    let myhistogram=echarts.init(histogram)
    myhistogram.setOption({
        title: {
            text: '柱状图数据展示',
            x:'center',
            y:'top',
            padding:20
          },
          xAxis: {
            data: xAxis,
            axisTick:{
                show:false // 不显示坐标轴刻度线
              },
              axisLine: {
                show: false, // 不显示坐标轴线
              },
          },
          yAxis: {
            name: '商品数',
          },
          series: [
            {
              type: 'bar',
              data: series,
              barWidth: '30%'
            }
          ]
    })
}
//封装请求
function httpFun(req,url,call){
    let xmlhttp=new XMLHttpRequest();
    xmlhttp.open(req,url);
    xmlhttp.send();
    xmlhttp.onreadystatechange=()=>{
	if(xmlhttp.readyState==4){
		if(xmlhttp.status==200){
            let result=JSON.parse(xmlhttp.responseText)
            let {xAxis,series}=result.data
            call(xAxis,series)
	    }
    }
}
}
function init(){
    setTimeout(()=>{
        httpFun("get","https://edu.telking.com/api/?type=month",curveFun)
        httpFun("get","https://edu.telking.com/api/?type=week",cakeFun)
        httpFun("get","https://edu.telking.com/api/?type=week",histogramFun)
    },100)
}
init()

//初始化底部
function foot(){
    
    for(let i=0;i<15;i++){
        let li=document.createElement("li")
        li.innerHTML="test"
        foot_ul.append(li)
    }
}
foot()